<template>
<div>
  <deliver-top-bar title="客户管理"></deliver-top-bar>
  <div style="text-align: left;padding-left: 5px;">
    <span class="area-item-top" :class="{active:currentArea === area.name}"  v-for="(area, index) in areaList" :key="index" @click="clickArea(area)">{{area.name}}</span>
    <span class="area-item-top" :class="{active:currentArea === '未定位'}"   @click="clickArea({name: '未定位', id: 0})">未定位</span>
  </div>
  <div style="padding: 0 10px">
    <t-grid :fields="columns" :data-list="contactList" :gridHeight="gheight" />
    <el-dialog v-model="showPop" title="修改路线" width="900">
      <div style="padding: 5px 0;margin-top: 10px;text-align: left;">
        <span class="area-item" :class="{active:currentArea === area.name}"  v-for="(area, index) in areaList" :key="index" @click="altArea(area)">{{area.name}}</span>
        <span class="area-item" :class="{active:currentArea === '未定位'}"   @click="altArea({name: '未定位', id: 0})">未定位</span>
      </div>
    </el-dialog>
  </div>
  <div>
    <el-dialog v-model="showSearch" title="搜索客户">
      <div>
        <vxe-form :data="searchModel" :items="searchFields"></vxe-form>
      </div>
      <div style="text-align: center;margin-top: 50px;">
        <lbtn  type="primary" @click="search"><i class="fa fa-search" /> 搜索</lbtn >
      </div>
    </el-dialog>
  </div>
</div>
</template>

<script>
// 客户管理
import tool from "@/utils/tool";
export default {
  name: "deliverContact",
  data () {
    return {
      formField: [
        { field: 'searchTxt', title: '关键字搜索', type: 'text',width: 160},
        { align: 'center', itemRender: { name: '$buttons', children: [{ props: { type: 'submit',icon:'fa fa-search', content: '搜索', status: 'primary' } }] } }
      ],
      searchTxt: '',
      currentArea: '',
      areaList: [],
      columns: [
        {type: 'index', width: 60},
        {field: 'id', visible: false},
        {field: 'tenantId', visible: false},
        {field: 'areaId', visible: false},
        {field: 'tenantName',title: '公司', width: 120},
        {field: 'areaName',title: '路线', width: 120},
        {field: 'name',width: 260,title: '终端名称' },
        {field: 'linkName',title: '联系人', width: 150},
        {field: 'linkMobile',title: '电话', width: 150},
        {field: 'address',title: '地址' },
      ],
      contactList: [],
      gheight: window.innerHeight - 220,
      showPop: false,
      row: {},
      rowIndex: -1,
      area: {},
      showSearch: false,
      searchFields:[
        {field:'searchTxt', title: '关键字', itemRender: {name: '$input'} },
      ],
      searchModel: {searchTxt: ''},
    }
  },
  created() {
    this.getList()
  },
  methods: {
    refresh () {
      this.searchModel.searchTxt = ''
      this.search()
    },
    getList () {
      tool.post('deliver/getAreaList',{}).then(ret=> {
        if (ret.stat && ret.data) {
          this.areaList = ret.data
          this.showSearch = false
        }
      })
    },
    clickArea( item ) {
      this.area = item
      this.currentArea = item.name
      this.contactList = []
      tool.post('deliver/getContactByAreaId', {areaId: item.id}).then(ret => {
        if (ret.stat) {
          this.contactList = ret.data
        }
      })
    },
    altArea (item) {
      tool.post('deliver/altArea', {areaId: item.id, buId: this.row.id}, false).then(ret => {
        if (ret.stat) {
          // this.clickArea(this.area)
          if (this.row.areaId !== item.id)
            this.contactList.splice(this.rowIndex, 1)
          this.showPop = false
        }
      })
    },
    search () {
      this.contactList = []
      tool.post('deliver/getContactByAreaId', {searchTxt: this.searchModel.searchTxt.trim()}).then(ret => {
        if (ret.stat) {
          this.contactList = ret.data
          this.showSearch = false
        }
      })
    },
    cellClick ({row, column, rowIndex}) {
      if (column.property === 'areaName') {
        this.rowIndex = rowIndex
        this.row = row
        // this.clickArea(this.area)
        this.showPop = true
      }
    }
  }
}
</script>

<style scoped lang="scss">
.area-item-top {
  display: inline-block;
  border: 1px solid fade(#aed0ea, 85%);
  background-color: white;
  margin: 5px;
  height: 40px;
  line-height: 40px;
  width: 130px;
  text-align: center;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  color: #515a6e;
}
.area-item-top:hover,.area-item-top:active  {
  border: 1px solid #5cadff;
  background-color: #5cadff;
  color: white;
}



.area-item {
  display: inline-block;
  border: 1px solid fade(#aed0ea, 85%);
  background-color: white;
  margin: 5px;
  height: 60px;
  line-height: 60px;
  width: 130px;
  text-align: center;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  color: #515a6e;
}
.area-item:hover,.area-item:active {
  border: 1px solid #5cadff;
  background-color: #5cadff;
  color: white;
}


</style>
